import React, { Component } from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { message } from 'antd';
import { WeaTableNew } from 'comsMobx';
import { WeaLocaleProvider, WeaTab, WeaButtonIcon } from 'ecCom';
import { AntdConfirm } from '../util';
import Edit from './Edit';

const { WeaTable } = WeaTableNew;
const getLabel = WeaLocaleProvider.getLabel;

@inject('settingStore')
@observer
class BlackList extends Component {
  static defaultProps = {
    prefixCls: 'email-setting-black-list',
  };

  componentDidMount() {
    const {
      settingStore: { blackListStore, setStoreState },
    } = this.props;
    let rightMenuDatas = [
      {
        key: 'refresh',
        icon: <i className="icon-coms-Update-synchronization" />,
        content: getLabel(197, '搜索'),
        onClick: () => blackListStore.getMailBlackList(),
      },
    ];
    setStoreState({ rightMenuDatas });
    blackListStore.getMailBlackList();
  }

  componentWillUnmount() {
    const {
      settingStore: { blackListStore },
    } = this.props;
    blackListStore.clear();
  }

  addBlack = () => {
    const {
      settingStore: { blackListStore },
    } = this.props;
    const { initalEditForm, setStoreState } = blackListStore;
    initalEditForm();
    setStoreState({ editVisible: true });
  };

  onOperatesClick = (record, index, operate) => {
    if (operate.index === '0') {
      // delete
      this.batchDel(record.randomFieldId);
    }
  };

  batchDel = (id) => {
    const {
      settingStore: { blackListStore },
    } = this.props;
    const {
      operateUserEmailBlack,
      blackTable,
      getMailBlackList,
    } = blackListStore;
    const ids = id || toJS(blackTable.selectedRowKeysAllPages).join();
    AntdConfirm('', () => {
      operateUserEmailBlack({ ids, operation: 'delete' }).then((res) => {
        if (res.flag) {
          message.success(getLabel(83472, '删除成功！'));
          getMailBlackList();
        } else {
          message.error(getLabel(384401, '删除失败，请重试！'));
        }
      });
    });
  };

  render() {
    const {
      prefixCls,
      settingStore: { blackListStore },
    } = this.props;
    const { blackTable } = blackListStore;
    const tabButtons = [
      <WeaButtonIcon
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaButtonIcon@gaxfl5@addBlack`}
        buttonType="add"
        type="primary"
        onClick={this.addBlack}
      />,
      <WeaButtonIcon
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaButtonIcon@23atj6@batchDel`}
        buttonType="del"
        type="primary"
        disabled={toJS(blackTable.selectedRowKeysAllPages).length === 0}
        onClick={() => this.batchDel()}
      />,
    ];
    return (
      <div className={prefixCls}>
        <WeaTab
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaTab@a3bg5s`}
          datas={[
            { title: getLabel(384448, '黑名单列表'), viewcondition: '1' },
          ]}
          keyParam="viewcondition"
          buttons={tabButtons}
        />
        <WeaTable
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaTable@nrbusn`}
          comsWeaTableStore={blackTable}
          onOperatesClick={this.onOperatesClick}
          hasOrder
          needScroll
        />
        <div className={`${prefixCls}-tip`}>
          <p className="wea-f14">{getLabel(558, '提示')}：</p>
          <p className="wea-f12">
            {getLabel(384449, '*仅外部邮箱或域名可添加到黑名单。')}
          </p>
          <p className="wea-f12">
            {getLabel(
              384450,
              '*黑名单中的邮箱地址或域所发来的邮件，将自动收至垃圾箱。',
            )}
          </p>
        </div>
        <Edit
          ecId={`${(this && this.props && this.props.ecId) || ''}_Edit@bp7hoi`}
          class={prefixCls}
        />
      </div>
    );
  }
}

export default BlackList;
